<!--这是旗下客户组件-->
<template>
	<div>
		<p class="filter"></p>
		<div class="addBox"  style="overflow: auto;">
			<h3 class="fixTitle"><span>我的员工</span>
				<p>
					<!-- <em style="cursor: pointer;" ><svg-icon icon-class="jian" class="font-size16"/></em><em style="cursor: pointer;"><svg-icon class="font-size16" icon-class="fullScreen" /></em> -->
          <em style="cursor: pointer;" @click="close"><svg-icon icon-class="cha" class="font-size16" /></em>
				</p>
			</h3>
			<div class="margin-b40 c-ph20 margin-t40">
				<!-- <p style="margin: 20px;">
					<span>直接客户数：<b style="color:red">{{customerData.num.directNum}}</b></span>
					<span>间接客户数：<b style="color:red">{{customerData.num.indirectNum}}</b></span>
					<span>普通客户数：<b style="color:red">{{customerData.num.normalNum}}</b></span>
					<span>vip客户数：<b style="color:red">{{customerData.num.vipNum}}</b></span>
					<span>svip客户数：<b style="color:red">{{customerData.num.svipNum}}</b></span>
				</p> -->
				<table v-loading="listLoading" element-loading-text="加载中...">
					<tr>
						<th>会员昵称</th>
						<th>手机号</th>
						<th>身份</th>
					</tr>
					<tr v-for="item in staffData.members.data" :key="item.id">
						<td style="text-align:left;padding: 10px 0;">
							<img :src="item.headimgurl" style="width:40px;height:40px;border-radius:100%;vertical-align:middle;margin-left:20px;">
							{{item.nickname}}
						</td>
						<td>{{item.mobile}}</td>
						<td>
							<span v-if="item.vipType == 1">普通会员</span>
							<span v-if="item.vipType == 2">vip</span>
							<span v-if="item.vipType == 3">代理商</span>
							<span v-if="item.vipType == 4">svip</span>
							<span v-if="item.vipType == 5">合伙人</span>
						</td>
					</tr>
				</table>
				<div class="block text-c">
			    <el-pagination
			      @size-change="handleSizeChange"
			      @current-change="handleCurrentChange"
			      :current-page="listQuery.currentPage"
			      :page-sizes="[10, 20, 30]"
			      :page-size="10"
			      layout="total, sizes, prev, pager, next, jumper"
			      :total="staffData.members.total">
			    </el-pagination>
			</div>
			</div>
		</div>
	</div>
</template>
<script>
  import { myCustomers } from '@/api/member'
  export default {
    data() {
      return {
        listQuery: {
          currentPage: 1,
          page: 1,
          limit: 10
        },
        listLoading: false
      }
    },
    props: ['staffData'],
    methods: {
      close() {
        this.$emit('hideStaff', false)
      },
      getList() {
        this.listLoading = true
        var data = {
          userId: this.staffData.userId,
          vipType: -1,
          currentPage: this.listQuery.currentPage,
          page: this.listQuery.page,
          limit: this.listQuery.limit
        }
        myCustomers(data).then(res => {
          this.staffData = res.data.data
          this.listLoading = false
        }).catch(err => {
          console.log(err)
        })
      },
      handleSizeChange(val) {
        this.listQuery.limit = val
        this.getList()
      },
      handleCurrentChange(val) {
        this.listQuery.page = val
        this.getList()
      },
      handleFilter() {
        this.listQuery.page = 1
        this.getList()
      }
    }
  }
</script>
<style scoped>
	p,h3 {margin:0;padding:0}
	h3 em{
		padding: 0 10px;
		font-style: normal;
	}
	h3 em:hover{
		color: #0E90D2;
	}
	.font-size16{
		font-size: 16px;
	}
	.fixTitle{
		width: 800px;
		padding: 0 10px;
	}
	.addBox {
		width: 800px;
		height: 400px;
		background: #fff;
		position: fixed;
		left: 20%;
		top: 20%;
		z-index: 101;
		font-size: 14px;
	}
	table{
		width: 100%;
		border: 1px solid #eee;
		border-spacing: 0;
		border-collapse: collapse;
		font-size: 12px;
	}
	td,th{
		border: 1px solid #eee;
		line-height: 36px;
		text-align: center;
	}
	.leftTd{
		width: 30%;
	}
	.rightTd{
		width: 70%;
	}
</style>
